<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <p id="app"></p>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"msg变量",
            info:"info变量"
        },
        // render 取值为一个固定方法 function(createElement){}
        //      createElement(tagName,attr,chilren)本身是一个函数，用于创建DOM对象
        //      render 必须将创建的 DOM结构进行返回，才可以为vue提供容器
        // render 函数主要完成模板到DOM元素的渲染操作
        //         render并不会被开发者直接使用，vue提供该方法是为了在一些特点场景中进行元素覆盖使用的
        //     在构建vue实例时，如果没有发现 render 函数的定义，该函数会执行默认功能，将vue模板转换DOM对象结构
        //     在构建vue实例时，如果发现了render函数被定义，会以重新定义的render结果作为模板结构使用
        render:function(createElement){
            console.log("render");
            return createElement(
                "div",
                {
                    attrs:{
                        id:"app",
                        title:"div标签"
                    },
                    style:{
                        color:"green",
                        border:"1px solid black"
                    }
                },
                [
                    createElement("p",this.msg),
                    createElement("P",this.info)
                ]
            )
        }
    })
</script>
</html>